<template>
    <div class="colorCircle" :style="{width:basePx+'px',height:basePx+'px'}">
      <div class="circle colorCircle_1" :style="{'background-color':para.color_100}">
      </div>
      <div class="circle colorCircle_2" :style="{'background-color':para.color_20}"></div>
      <div class="circle colorCircle_3" :style="{'border': 'solid ' +para.color_60+' 1px','box-shadow': '0px 0px 3px 0px '+para.color_60+' inset'}"></div>
      <div class="circle colorCircle_4" :style="{'border': 'solid ' +para.color_60+' 1px','box-shadow': '0px 0px 3px 0px '+para.color_60+' inset'}"></div>
    </div>

</template>

<script>
  import {gsap} from 'gsap/all'

  export default {
    name: 'base-circle-gsap',
    props: {
      para: {},
      basePx:{}
    },
    data () {
      return {

      }
    },

    mounted () {
      this.createGsap()
    },
    methods:{
      createGsap () {
        let tl = gsap.timeline({
          repeat:-1
        })
        let totalTime = 3
        let setLabel = tl.addLabel('startLabel', '+=0')
          .addLabel('label_1_3', '+=' + totalTime / 3)
          .addLabel('label_1_2', '+=' + totalTime / 2)
          .addLabel('label_2_3', '+=' + totalTime / 3 * 2)
        setLabel.to('.colorCircle_1', {scale: 0.8, duration: totalTime / 2}, 'startLabel')
          .to('.colorCircle_1', {scale: 1, duration: totalTime / 2}, 'label_1_2')
          .to('.colorCircle_2', {scale: 0.7, duration: totalTime / 2}, 'startLabel')
          .to('.colorCircle_2', {scale: 1, duration: totalTime / 2}, 'label_1_2')
          .to('.colorCircle_4', {scale: 1.2, duration: totalTime / 2}, 'startLabel')
          .to('.colorCircle_4', {scale: 1, duration: totalTime / 2}, 'label_1_2')
          .to('.colorCircle_3', {scale: 1.1, duration: totalTime / 3}, 'startLabel')
          .to('.colorCircle_3', {scale: 0.9, duration: totalTime / 3}, 'label_1_3')
          .to('.colorCircle_3', {scale: 1, duration: totalTime / 3}, 'label_2_3')

      }
    },
    watch:{
      'para.basePx':function (v) {
        this.basePx = v
      }
    }
  }
</script>

<style scoped>
  .colorCircle {
    /*width: 100px;*/
    /*height: 100px;*/
    position: absolute;
  }

  .circle {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
  }

  .colorCircle_1 {
    width: 100%;
    height: 100%;
    opacity: 0.1;
    border-radius: 50%;
  }

  .colorCircle_2 {
    width: 70%;
    height: 70%;
    border-radius: 50%;
  }

  .colorCircle_3 {
    width: 25%;
    height: 25%;
    background-color: rgba(240,174,45,0.05);
    border-radius: 50%;
  }

  .colorCircle_4 {
    width: 12%;
    height: 12%;
    background-color: rgba(240,174,45,0.05);
    border-radius: 50%;
  }
</style>
